<template>
  <div class="doc-layout">
    <!-- 顶部导航 -->
    <header class="doc-header">
      <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
          <div class="flex items-center space-x-8">
            <h1 class="text-xl font-bold">
              <router-link to="/docs" class="text-gray-900 dark:text-white">
                文档中心
              </router-link>
            </h1>
            
            <!-- 文档源选择 -->
            <div class="doc-source-selector">
              <el-select 
                v-model="currentSource" 
                placeholder="选择文档源"
                size="small"
                @change="handleSourceChange"
              >
                <el-option
                  v-for="(source, key) in docSources"
                  :key="key"
                  :label="source.name"
                  :value="key"
                />
              </el-select>
            </div>
          </div>
          
          <!-- 搜索框 -->
          <div class="flex items-center space-x-4">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索文档..."
              prefix-icon="Search"
              clearable
              class="w-64"
              @clear="handleSearch"
              @keyup.enter="handleSearch"
            />
            
            <!-- 返回主站 -->
            <el-button link @click="$router.push('/')">
              <el-icon><ArrowLeft /></el-icon>
              返回主站
            </el-button>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 主体内容区 -->
    <div class="doc-main">
      <div class="container mx-auto px-4">
        <div class="doc-content-wrapper">
          <!-- 侧边栏 -->
          <aside class="doc-sidebar" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
            <div class="sidebar-header">
              <el-button
                text
                circle
                size="small"
                @click="sidebarCollapsed = !sidebarCollapsed"
              >
                <el-icon>
                  <component :is="sidebarCollapsed ? 'Expand' : 'Fold'" />
                </el-icon>
              </el-button>
            </div>
            
            <!-- 分类导航 -->
            <nav class="doc-nav" v-if="!sidebarCollapsed">
              <div
                v-for="category in categoryTree"
                :key="category.id"
                class="nav-group"
              >
                <h3 class="nav-group-title">
                  <router-link
                    :to="`/docs/category/${category.slug}`"
                    :class="{ active: currentCategory?.id === category.id }"
                  >
                    {{ category.name }}
                  </router-link>
                </h3>
                
                <!-- 子分类 -->
                <ul v-if="category.children?.length" class="nav-sublist">
                  <li
                    v-for="subCategory in category.children"
                    :key="subCategory.id"
                  >
                    <router-link
                      :to="`/docs/category/${subCategory.slug}`"
                      :class="{ active: currentCategory?.id === subCategory.id }"
                      class="nav-subitem"
                    >
                      {{ subCategory.name }}
                    </router-link>
                    
                    <!-- 文档列表 -->
                    <ul
                      v-if="lessonsByCategory.get(subCategory.id)?.length"
                      class="doc-list"
                    >
                      <li
                        v-for="lesson in lessonsByCategory.get(subCategory.id)"
                        :key="lesson.id"
                      >
                        <router-link
                          :to="`/docs/lesson/${lesson.slug || lesson.id}`"
                          :class="{ active: currentLesson?.id === lesson.id }"
                          class="doc-link"
                        >
                          {{ lesson.title }}
                        </router-link>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>
          </aside>
          
          <!-- 内容区 -->
          <main class="doc-content">
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </main>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, Search, Expand, Fold } from '@element-plus/icons-vue'
import { useDocsStore } from '@/stores/docs'

const router = useRouter()
const docsStore = useDocsStore()

// 状态
const sidebarCollapsed = ref(false)
const currentSource = ref('cursor')

// 计算属性
const {
  categoryTree,
  lessonsByCategory,
  currentLesson,
  currentCategory,
  searchKeyword,
  docSources
} = toRefs(docsStore)

// 方法
const handleSourceChange = (source: string) => {
  // 切换文档源
  router.push(`/docs/${source}`)
}

const handleSearch = () => {
  if (searchKeyword.value) {
    router.push({
      name: 'docs-search',
      query: { q: searchKeyword.value }
    })
  }
}

// 初始化
onMounted(async () => {
  await docsStore.fetchDocCategories()
  await docsStore.fetchDocLessons()
  await docsStore.fetchDocTags()
})
</script>

<style lang="scss" scoped>
.doc-layout {
  min-height: 100vh;
  background-color: var(--el-bg-color);
}

.doc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
}

.doc-main {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.doc-content-wrapper {
  display: flex;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.doc-sidebar {
  width: 280px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  
  &.sidebar-collapsed {
    width: 50px;
  }
}

.sidebar-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
  padding-right: 0.5rem;
}

.doc-nav {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 1rem;
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: var(--el-border-color);
    border-radius: 3px;
  }
}

.nav-group {
  margin-bottom: 2rem;
}

.nav-group-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  
  a {
    color: var(--el-text-color-primary);
    text-decoration: none;
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    
    &:hover {
      background-color: var(--el-fill-color-light);
    }
    
    &.active {
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }
  }
}

.nav-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-subitem {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--el-text-color-regular);
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
  
  &:hover {
    background-color: var(--el-fill-color-light);
    color: var(--el-text-color-primary);
  }
  
  &.active {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    font-weight: 500;
  }
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 1rem;
}

.doc-link {
  display: block;
  padding: 0.375rem 0.75rem;
  color: var(--el-text-color-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
  
  &:hover {
    background-color: var(--el-fill-color-light);
    color: var(--el-text-color-primary);
  }
  
  &.active {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
}

.doc-content {
  flex: 1;
  min-width: 0;
}

.doc-source-selector {
  :deep(.el-select) {
    width: 150px;
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 响应式
@media (max-width: 1024px) {
  .doc-content-wrapper {
    gap: 1.5rem;
  }
  
  .doc-sidebar {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .doc-sidebar {
    position: fixed;
    left: 0;
    top: 64px;
    bottom: 0;
    background-color: var(--el-bg-color);
    border-right: 1px solid var(--el-border-color);
    z-index: 50;
    transform: translateX(-100%);
    
    &:not(.sidebar-collapsed) {
      transform: translateX(0);
    }
  }
  
  .doc-content {
    width: 100%;
  }
}
</style> 